<template>
  <div class="home">
    <!-- <mycomponent>hello</mycomponent> -->
    <!-- 导航 -->
    <navbar>
      <div class="nav">
        <div class="l">
          <h2>网易云音乐呵呵</h2>
        </div>
        <div class="r">
          <span>下载APP</span>
        </div>
      </div>
    </navbar>
    <!-- 内容 -->
    <router-view></router-view>
    <!-- 底部tanbar -->
    <Tabbars ind="home"></Tabbars>
  </div>
</template>

<script>
// @ is an alias to /src
import debounce from "../plugins/debounce"
import instance from "../request/api"
import Tabbars from "@/components/Tabbars"
import Navbar from "@/components/Navbar"
// console.log(process.NODE_ENV)
export default {
  name: "Home",
  data(){
    return {
      debounce_fn:null
    }
  },
  methods:{
    // 业务函数
    fn(){
      console.log(11)
    }
  },
  created(){
    // 对业务函数进行了防抖封住
    this.debounce_fn = debounce(this.fn,3000)
    instance.get("/api").then(res => console.log(res.data))
  },
  components: {
    Tabbars,
    Navbar
  },
};
</script>
<style lang="less" scoped>
.home .nav{
  background: @primary;
}
.nav{
  line-height: 60px;
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-items: center;
}

</style>
